import { Component, OnInit, OnDestroy, ViewChild, ElementRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd';
import { Router } from '@angular/router';
import { ApiService, urlService } from 'src/app/core/api';
import { environment } from 'src/environments/environment';
import { MessageService } from 'src/app/core/service';

@Component({
  selector: 'app-recharge-unusual',
  templateUrl: './recharge-unusual.component.html',
  styleUrls: ['./recharge-unusual.component.scss']
})
export class RechargeUnusualComponent implements OnInit, OnDestroy {

  bankUrl = urlService(environment.type, '平台收款银行账号列表');
  createUrl = urlService(environment.type, '创建异常充值订单');
  public isVisible: Boolean = false;
  public banks: Array<any> = [];
  public activeBank: any = {};
  public tempBank: any = {};
  public amount: String = '';
  public verifyCode: string;
  public remark: string;
  @ViewChild('inputElement') inputElement: ElementRef;
  @ViewChild('verifyElement') verifyElement: ElementRef;
  constructor(
    private message: NzMessageService,
    private obs: MessageService,
    private router: Router,
    private api: ApiService,
  ) {
  }
  ngOnInit() {
    console.log(this.router);
    this.obs.sendMessage('异常充值');
    this.api.post(this.bankUrl, {}).subscribe((data: any) => {
      this.banks = data.data.list;
      this.activeBank = this.banks[0];
    });
  }
  ngOnDestroy() {

  }
  onChange(value: string): void {
    this.updateValue(value);
  }
  changeVerifyCode(value: string): void {
    const reg = /[^/d]/g;
    if ((!isNaN(+value) && reg.test(value)) || value === '' || value === '-') {
      if (value.length < 7) {
        this.verifyCode = value;
      } else {
        this.verifyCode = value.substring(0, 6);
      }
    }
    this.verifyElement.nativeElement.value = this.verifyCode;
  }
  onBlur(): void {
    if (this.amount.charAt(this.amount.length - 1) === '.' || this.amount === '-') {
      this.updateValue(this.amount.slice(0, -1));
    }
  }
  /**
   * updateValue 过滤输入金额值
   */
  public updateValue(value: string): void {
    const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
    if ((!isNaN(+value) && reg.test(value)) || value === '' || value === '-') {
      this.amount = value;
    }
    this.inputElement.nativeElement.value = this.amount;
  }
  /**
   * showBanks 显示弹出框
   */
  public showBanks() {
    this.isVisible = true;
    this.tempBank = this.activeBank;
  }
  /**
   * handleCancel 弹框-取消按钮
   */
  public handleCancel() {
    this.isVisible = false;
  }
  /**
   * handleOk 弹框-确认按钮
   */
  public handleOk() {
    this.isVisible = false;
    this.activeBank = this.tempBank;
  }
  /**
   * selectBank 选择收款银行
   */
  public selectBank(item) {
    this.tempBank = item;
  }
  /**
   * onSubmit  提交充值订单
   */
  public onSubmit() {
    if (!this.amount) {
      this.message.error('请输入充值金额');
      return;
    }
    if (!this.verifyCode) {
      this.message.error('请输入充值金额');
      return;
    }
    if (this.verifyCode.length !== 6) {
      this.message.error('请输入6位数字关联码');
      return;
    }
    const amount = this.amount, verifyCode = this.verifyCode, remark = this.remark;
    const {id: bankId, bankName, bankSubBranch, bankAccountNum, bankAccountName} = this.activeBank;
    this.api.post(this.createUrl,
      {amount, verifyCode, remark, bankId, bankName, bankSubBranch, bankAccountNum, bankAccountName}).subscribe((data: any) => {
        if (data.message === 'success') {
          sessionStorage.setItem('unusualSuccessData', JSON.stringify(data.data));
          this.router.navigate(['/member/recharge/unusualSuccess'], {});
        }
    });
  }
}

